<template>
	<view class="content">
		<!-- 轮播图 -->
		<swiper class="swiper" :circular="true" :indicator-dots="true" :autoplay="true" :interval="3000"
			:duration="1000">
			<swiper-item v-for="(item,index) in swiperList" :key="index" @click="preViewPic(item)">
				<view class="swiper-item">
					<image :src="item" mode=""></image>
				</view>
			</swiper-item>
		</swiper>

		<!-- 搜索框 -->
		<uni-search-bar @confirm="search" v-model="searchValue" @clear="clear" placeholder="请输入菜名" radius="15"
			bgColor="#efefef" maxlength="200" style="width: 300px;"></uni-search-bar>

		<!-- 美食分类 -->
		<view class="food_class">
			<view class="per_class" v-for="(cItem,index) in foods" :key="index">
				<view class="family_foods">
					<text>{{cItem.class}}</text>
				</view>
				<view class="family_foods_image">
					<view class="food_image" v-for="(fItem,index1) in cItem.list" :key="index1"
						@click="toFoodDetailPage(fItem)">
						<image :src="fItem.image" mode=""></image>
						<view class="food_name"><text>{{fItem.name}}</text></view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		baseUrl
	} from '../../api/request.js'
	export default {
		data() {
			return {
				searchValue: '', // 搜索的关键字
				swiperList: [
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F811%2F0HQ4104127%2F140HQ04127-5-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674093323&t=910c2b4330b8b3096d64b8c2ffd70869',
					'https://img1.baidu.com/it/u=1294439722,116143144&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
					'https://img0.baidu.com/it/u=946314603,465355950&fm=253&fmt=auto&app=138&f=JPEG?w=461&h=346',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2F472309f7905298220ed7b8b5d9ca7bcb0b46d4e4&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674093429&t=54be279b25d753b0877db919c283909f',
					'https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/bainuo/crop=0,14,470,285;w=470;q=99/sign=969ddebadbc451dae2b956ab8bcd7e57/b8014a90f603738d243f4ac6b51bb051f919ecd9.jpg'
				],
				foods: [{
						class: '家常菜',
						list: [{
								name: '西红柿炒鸡蛋',
								image: 'https://i2.chuimg.com/cbf28b18d47a4c378ad7c702dc9da6f8_1280w_956h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '水煮肉片',
								image: 'https://i2.chuimg.com/f7fd9808106444448131f6d1361dc0c4_1242w_2688h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '手撕包菜',
								image: 'https://i2.chuimg.com/80b2fbf6d6c547dca21b61fe1c875f48_1080w_810h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '油焖大虾',
								image: 'https://i2.chuimg.com/142b348c742d451ebb5a5802605592b1_960w_1280h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '红烧带鱼',
								image: 'https://i2.chuimg.com/8823e14ef9ff470095f01cb000343128_1124w_1500h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '糖醋排骨',
								image: 'https://i2.chuimg.com/1ebd8d06f15140e3a8eed3d792066a45_2784w_1856h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
						]
					},
					{
						class: '小吃',
						list: [{
								name: '紫薯糯米卷',
								image: 'https://i2.chuimg.com/03ae76a2a0294e8ab990a925251cb404_602w_492h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '麻辣藕片',
								image: 'https://i2.chuimg.com/3fd139fd86d54bf693f6e522a34381ce_3024w_3024h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '皮蛋瘦肉粥',
								image: 'https://i2.chuimg.com/41e42f5f020a4706b10e402149f9987a_1242w_1656h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '凉拌方便面',
								image: 'https://i2.chuimg.com/f9cb5ed5f26d46019a0a3a856af53499_1921w_2560h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '五香茶叶蛋',
								image: 'https://i2.chuimg.com/ed37e977a2ca4e28b474b7c79cd5de08_1400w_933h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '武汉热干面',
								image: 'https://i2.chuimg.com/384cea20083846e28d8a3d35dda4d9a7_1280w_960h.jpg?imageView2/2/w/660/interlace/1/q/90'
							}
						]
					},
					{
						class: '早餐',
						list: [{
								name: '鸡蛋早餐饼',
								image: 'https://i2.chuimg.com/b4954381e20541f8bf2e09a72d9375f8_570w_321h.gif?imageView2/2/w/660/interlace/1/q/90/format/gif'
							},
							{
								name: '清汤面',
								image: 'https://i2.chuimg.com/7e984fe01fa6417c811f23306b75ad4a_1152w_864h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '香煎土豆丝饼',
								image: 'https://i2.chuimg.com/2cf47cf8e0624334904d714800785070_583w_450h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '疙瘩汤',
								image: 'https://i2.chuimg.com/50ca70108f7c446dbe023f71abae93b2_1920w_2560h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '油泼面',
								image: 'https://i2.chuimg.com/b1ac325df11d40f78b89921a886d69ee_1080w_864h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '手抓饼',
								image: 'https://i2.chuimg.com/05d2204b3b694958a0da5383f3e6d2f5_1080w_810h.jpg?imageView2/2/w/660/interlace/1/q/90'
							}
						]
					},
					{
						class: '甜品',
						list: [{
								name: '橙香双皮奶蒸蛋',
								image: 'https://i2.chuimg.com/1a24d57e13c143b98ce1848b148b5dee_1695w_1356h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '芒果西米露',
								image: 'https://i2.chuimg.com/85f3f078a14549b491f3b36558d4aece_1242w_994h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '红豆桂花小丸子',
								image: 'https://i2.chuimg.com/9864bffd528b4e35a91998e3237fc171_959w_1280h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '炸鲜奶',
								image: 'https://i2.chuimg.com/53a7552643744e8292c43e755b39eea3_954w_750h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '香酥苹果派',
								image: 'https://i2.chuimg.com/0993e8dc315f412fa299a220398a19af_2879w_2879h.jpg?imageView2/2/w/660/interlace/1/q/90'
							},
							{
								name: '糯米凉糕',
								image: 'https://i2.chuimg.com/1d275325a22c4163a35fa35692dedfca_4032w_2268h.jpg?imageView2/2/w/660/interlace/1/q/90'
							}
						]
					}
				]

			}
		},

		onLoad() {
			// 获取推荐菜谱数据
			this.getRecommendFoodsData();
			// 获取轮播图
			this.getSwiperData();
		},

		// 下拉刷新页面
		onPullDownRefresh() {
			this.getRecommendFoodsData();
			this.getSwiperData();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		},

		methods: {
			// 点击图片预览
			preViewPic(item) {
				uni.previewImage({
					urls: this.swiperList,
					current: item
				})
			},
			// 去食物详情页面
			toFoodDetailPage(item) {
				uni.navigateTo({
					url: `./foodDetail?name=${item.name}`
				})
			},

			// 搜索框搜索
			search() {
				if (this.searchValue.trim() == '') {
					uni.showToast({
						title: '请输入菜名',
						duration: 1000
					})
				} else {
					uni.navigateTo({
						url: `./foodDetail?name=${this.searchValue}`
					})
					this.searchValue = '';
				}

			},

			// 清除搜索
			clear() {
				this.searchValue = '';
			},

			// 获取推荐的菜品数据
			getRecommendFoodsData() {
				uni.showLoading({
					title: '加载中...',
					mask: true,
				})
				const _this = this;
				uni.request({
					url: `${baseUrl}/search/getRandomRecipe`,
					method: 'GET',
					timeout: 6000,
					success(res) {
						if (res.data.code == 10000) {
							_this.foods = res.data.data
						}
					},
					complete() {
						uni.hideLoading();
					}
				})
			},

			// 获取轮播图
			getSwiperData() {
				const _this = this;
				uni.request({
					url: `${baseUrl}/search/getRandomSwiper`,
					method: 'GET',
					timeout: 6000,
					success(res) {
						if (res.data.code == 10000) {
							_this.swiperList = res.data.data
						}
					},
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.swiper {
		width: 100%;
		height: 150px;
	}

	.swiper-item>image {
		width: 100%;
		height: 150px;
	}

	.family_foods {
		width: 95%;
		height: 1px;
		border-bottom: 1px solid #55aaff;
		font-size: 12px;
		color: #55007f;
		text-align: center;
		margin-bottom: 20px;
		margin-top: 50px;
	}

	.food_class {
		width: 95%;
		margin-left: auto;
		margin-right: auto;
	}

	.family_foods>text {
		background-color: aliceblue;
		position: relative;
		top: -5px;
	}

	.food_image {
		width: 160px;
		height: 170px;
		border-radius: 10px;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.food_image>image {
		width: 160px;
		height: 160px;
		border-radius: 5px;
	}

	.food_name>text {
		font-size: 14px;
		color: #55007f;
		font-family: 'STXingkai';
	}

	.family_foods_image {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
</style>
